<template>
  <div>
    <el-button type="primary" v-click-once="time">仅点击一次</el-button>
  </div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding, ref } from "vue";
let time = ref(1000);
interface HTMLElementWithDisabled extends HTMLElement {
  disabled: boolean;
}
const vClickOnce: Directive = {
  mounted(el: HTMLElementWithDisabled, binding: DirectiveBinding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 1000);
      }
    });
  },
};
</script>

<style lang="less" scoped></style>
